<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>自定义模态框</title>

    <style>
        .cover {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.4);
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 998;
        }

        .modal {
            height: 400px;
            width: 600px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">点我登录</button>
<div class="cover hide"></div>
<div class="modal hide">
    <form action="">
        <p>
            <span class="">用户名:
                <input type="text">
            </span>
        </p>
        <p>
            <span class="">密码:
                <input type="password">
            </span>
        </p>
        <p>
            <input type="submit" value="登录">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
</div>
<script src="jquery.min.js"></script>
<script>
    $("#b1,#b2").click(function () {
        $(".cover").removeClass("hide");
        $(".modal").removeClass("hide");
    })
    $("#cancel").click(function () {
        $(".cover").addClass("hide");
        $(".modal").addClass("hide");

    })
</script>
</body>
</ht